<template>
	<div class="">
		<!--<base-header pName="login"></base-header>-->
		<div class="login-bg"></div>
		<div class="app-login">
			<img class="app-logo" src="../../assets/logo.jpg" />
			<div class="app-input-div">
				<img class="app-tips" src="../../assets/icon/phone.png" />
				<input v-model="tel" class="app-input" type="tel" placeholder="请输入手机号" name="" id="" value="" />
			</div>
			<div class="app-input-div">
				<img class="app-tips" src="../../assets/icon/password.png" />
				<input v-model="password" class="app-input" type="password" placeholder="请输入登录密码" name="" id="" value="" />
			</div>
			<div class="text-right">
				<span @click="jumpRegister" class="app-forget-password pull-left">前往注册</span>
				<span @click="jumpForget" class="app-forget-password">忘记密码？</span>
			</div>
			<span @click="login" :class="{choose : isLogin}" class="app-login-button">登 录</span>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	export default {
		name: 'Login',
		components: {
			BaseHeader
		},
		data() {
			return {
				tel: '',
				password: ''
			}
		},
		computed: {
			isLogin: function() {
				if(this.tel && this.password) {
					return true;
				} else {
					return false;
				}
			}
		},
		methods: {
			//登录
			login() {
				if(this.isLogin) {
					var self = this;
					var data = {
						mobile: self.tel,
						password: self.password
					};
					$.post(global.domain + global.API.guest_login, data, function(msg) {
						//self.isloading = false;
						if(msg.error == 0) {
							localStorage.setItem('uid',msg.uid);
							localStorage.setItem('token',msg.api_token);
							self.$router.push({
								path: '/'
							});
						} else {
							self.$layer.alert(msg.msg);
							console.log(msg.error);
						}
					}, 'json');
				} else {
					console.log(this.isLogin);
				}
			},
			//跳到注册
			jumpRegister() {
				this.$router.push({
					path: '/register'
				});
			},
			//跳到忘记密码
			jumpForget() {
				this.$router.push({
					path: '/forget_password'
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/user.css";
</style>